<template>
    <el-form :model="form" label-width="auto" style="max-width: 600px">
        <el-form-item label="物料名称">
            <el-input v-model="form.materialName"  @click="dialogTableVisible = true" />
        </el-form-item>
        <el-form-item label="物料编码">
            <el-input v-model="form.materialCode" />
        </el-form-item>
        <el-form-item label="物料型号">
            <el-input v-model="form.materialModel" />
        </el-form-item>
        <el-form-item label="物料单位">
            <el-input v-model="form.unitMaterial" />
        </el-form-item>
        <el-form-item label="投料量">
            <el-input v-model="form.quantityMaterialInput" />
        </el-form-item>
        <el-form-item label="理论投料比例">
            <el-input v-model="form.theoreticalMaterial" />
        </el-form-item>
        <el-form-item label="实际投料比例">
            <el-input v-model="form.actualMaterial" />
        </el-form-item>
        <el-form-item label="投料人员">
            <el-select v-model="form.materialInputOperator" placeholder="请选择投料人员">
                <el-option
                    v-for="user in getuserlist"
                    :key="user.userId"
                    :label="user.userName"
                    :value="user.userName">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="工艺要求说明">
            <el-input v-model="form.requirementDescription" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">添加</el-button>
        </el-form-item>
    </el-form>

    <el-dialog v-model="dialogTableVisible" title="物料信息" width="800">
        <el-table :data="queryMateralList" @row-click="handleRowClick">
            <el-table-column property="material_code" label="物料编号" width="150" />
            <el-table-column property="material_name" label="物料名称" width="150" />
            <el-table-column property="specification" label="规格" />
            <el-table-column property="unit" label="单位" width="150" />
        </el-table>
    </el-dialog>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const dialogTableVisible = ref(false);

const getuserlist = ref([{
    userId: 0,
    userName: "",
    password: "",
    userNickName: ""
}])
const getuser = () => {
    axios.get('http://10.223.8.6:8000/read/api/User/GetUse').then((response) => {
        getuserlist.value = response.data.data
        console.log("用户信息", getuserlist.value)
    })
}

// do not use same name with ref
const form = ref({
    materialCode: "",
    materialName: "",
    materialModel: "",
    unitMaterial: "",
    quantityMaterialInput: "",
    theoreticalMaterial: "",
    actualMaterial: "",
    materialInputOperator: "",
    requirementDescription: ""
})

const onSubmit = () => {
    console.log('submit!')
    axios.post('https://localhost:7229/api/Feeding/AddFeeding', form.value)
        .then(res => {
            if (res.data.code == 200) {
                ElMessage.success(res.data.msg)
            }
            else {
                ElMessage.error(res.data.msg)
            }
        })
}

onMounted(() => {
    queryMaterial();
    getuser();
})

const queryMateralList = ref([{
    materialId: 0,
    material_code: "",
    material_name: "",
    specification: "",
    unit: "",
    storage_quantity: 0
}]);
const queryMaterial = () => {
    axios.get('http://localhost:5118/api/MaterialPreparation/GetMaterial')
        .then(res => {
            queryMateralList.value = res.data.data
            console.log("物料信息",queryMateralList.value)
        })
}

const handleRowClick = (row) => {
    form.value.materialCode = row.material_code;
    form.value.materialName = row.material_name;
    form.value.materialModel = row.specification;
    form.value.unitMaterial = row.unit;
    dialogTableVisible.value = false;
}
</script>    